/**
* 导出组件
*/
<template>
	<div>
		<span @click="openExportDialog()" :style="exportBthStyle">导出当前内容(<span class="red-font">beta</span>)</span>
		<div v-if="showExportPdfDialog" class="export">
			<div class="inner-wrapper left">
				<div style="border: 1px dashed red; height: 100%;">
					<h2 v-if="!showPreviewDialog" class="preview-txt">预览区</h2>
					<!--PDF预览元素-->
					<iframe ref="previewIframe" v-if="showPreviewDialog" :src="pdfSrc" width="100%"
						height="100%"></iframe>
				</div>
			</div>
			<!-- 导出工作区 -->
			<div class="inner-wrapper right">
				<span @click="closedExportDialog()" class="right-close">✖</span>
				<span class="export-title">导出向导</span>
				<hr />
				<table>
					<tr>
						<td><span class="option-left">导出类型 </span></td>
						<td>
							<select class="opton-input">
								<option value="html">html</option>
								<option value="pdf" selected=true>pdf</option>
								<option value="word">word</option>
							</select>
						</td>
					</tr>
					<tr>
						<td><span class="option-left">纸张规格 </span></td>
						<td>
							<select v-model="pdfExportOpt.paper" class="opton-input">
								<option v-for="value in paperEnums" :key="value">{{value}}</option>
							</select>
						</td>
					</tr>
					<tr>
						<td><span>纸张方向 </span></td>
						<td>
							<select v-model="pdfExportOpt.orientation" class="opton-input">
								<option v-for="item in orientationEnums" :key="item.key" :value="item.key">
									{{item.value}}
								</option>
							</select>
						</td>
					</tr>
					<tr>
						<td><span>PDF质量(0-1) </span></td>
						<td><input v-model="pdfExportOpt.quality" type="number" class="opton-input" min="0.1" max="1.0"
								step="0.05" /></td>
					</tr>
					<tr>
						<td><span>页边距(上) </span></td>
						<td><input v-model="pdfExportOpt.top" type="number" class="opton-input" /></td>
					</tr>
					<tr>
						<td><span>页边距(下) </span></td>
						<td><input v-model="pdfExportOpt.bottom" type="number" class="opton-input" /></td>
					</tr>
					<tr>
						<td><span>页边距(左) </span></td>
						<td><input v-model="pdfExportOpt.left" type="number" class="opton-input" /></td>
					</tr>
					<tr>
						<td><span>页边距(右) </span></td>
						<td><input v-model="pdfExportOpt.right" type="number" class="opton-input" /></td>
					</tr>
					<tr>
						<td><span class="option-left">导出单位 </span></td>
						<td>
							<select v-model="pdfExportOpt.unit" class="opton-input">
								<option v-for="value in unitsEnums" :value="value" :key="value">{{value}}</option>
							</select>
						</td>
					</tr>
				</table>
				<hr />
				<button @click="previewPDF()">预览</button>
				<button v-if="showDownload" @click="closePreviewPDF()" class="left-space">取消预览</button>
				<!--PDF下载元素-->
				<a v-if="showDownload" :href="pdfSrc" ref="downloadLink" download></a>
				<button v-if="showDownload" @click="downloadPDF()" class="left-space">下载</button>
				<button @click="closedExportDialog()" class="left-space">关闭</button>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import contentVue from '@/views/ContentVue'
	import htmlToPdf from '@/components/htmlToPdf'
	import { onMounted, ref } from 'vue';
	import html2pdf from 'html2pdf.js';

	// 引用组件
	components: { contentVue }

	// 是否显示导出框
	const showExportPdfDialog = ref(false)
	// 是否显示预览框
	const showPreviewDialog = ref(false)
	// 是否显示下载按钮
	const showDownload = ref(false)
	// 导出pdf参数
	const pdfExportOpt = ref({ top: 10, bottom: 10, left: 10, right: 10, unit: 'mm', paper: 'a4', quality: 0.98, orientation: "portrait" });
	// pdf下载URL
	const pdfSrc = ref('')
	const message = ref('')
	// 下载链接标签
	const downloadLink = ref(null);
	// 预览iframe
	const previewIframe = ref(null);
	// 导出pdf单位
	const unitsEnums = ref(["mm", "cm", "in", "pt", "px", "pc", "em", "ex"])
	// 导出pdf单位
	const paperEnums = ref(["a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "a10", "dl", "letter", "government-letter", "legal", "junior-legal", "ledger", "tabloid", "credit-card"])
	// 纸张方向
	const orientationEnums = ref([{ "key": "portrait", "value": "横向" }, { "key": "landscape", "value": "纵向" }]);

	//挂在dom时触发的事件
	onMounted(() => {
		message.value = '123'
	})

	// 接收父组件传递的值
	const props = defineProps({
		exportBthStyle: {
			type: String,
			default: "color:gray;",
		},
	})


	/**
	 * 预览pdf
	 */
	function previewPDF() {
		// 获取待导出的节点
		const dom : HTMLElement = <HTMLElement>document.getElementById("container000");
		if (!dom) {
			throw new Error("html dom not eixst")
		}
		// pdf导出参数
		const ops = {
			filename: "test.pdf",
			margin: [pdfExportOpt.value.top, pdfExportOpt.value.left, pdfExportOpt.value.bottom, pdfExportOpt.value.right],
			image: {
				type: 'jpeg',
				quality: pdfExportOpt.value.quality
			},
			pagebreak: { mode: ['avoid-all'], before: ".page-end" },
			enableLinks: false,
			html2canvas: {
				scale: 2,
				useCORS: true
			},
			jsPDF: {
				unit: pdfExportOpt.value.unit,
				format: pdfExportOpt.value.paper,
				orientation: pdfExportOpt.value.orientation,
				compress: true
			}
		}
		html2pdf()
			.from(dom).set(ops)
			.outputPdf('dataurlstring', { filename: "123.pdf" })
			.then((pdfData : string) => {
				// 保存PDF src数据
				pdfSrc.value = pdfData;
				// 显示PDF预览
				showPreviewDialog.value = true;
				// 显示PDF下载
				showDownload.value = true;
			});
	}

	/**
	 * 取消预览
	 */
	function closePreviewPDF() {
		showPreviewDialog.value = false;
		showDownload.value = false;
	}
	/**
	 * 关闭导出
	 */
	function closedExportDialog() {
		showPreviewDialog.value = false;
		showExportPdfDialog.value = false;
		showDownload.value = false;
		pdfSrc.value = '';
	}

	/**
	 * 打开导出向导框
	 */
	function openExportDialog() {
		showExportPdfDialog.value = true;
	}

	/**
	 *下载pdf 
	 */
	function downloadPDF() {
		if (confirm("确认导出pdf?")) {
			if (downloadLink && pdfSrc.value) {
				// 设置下载名称
				downloadLink.value.download = 'exported-pdf.pdf';
				downloadLink.value.click();
			} else {
				alert("预览后才能下载")
			}
		}
	}
</script>
<style scoped>
	.export {
		position: fixed;
		z-index: 1001;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70%;
		justify-content: center;
		align-items: center;
	}

	.inner-wrapper {
		height: 800px;
		background-color: white;
	}

	.left {
		width: 70%;
		float: left;
		border: 1px solid black;
		padding: 10px;
		background-color: lightgray;
	}

	.right {
		width: 30%;
		float: left;
		padding: 20px;
		border-top: 1px solid black;
		border-right: 1px solid black;
		border-bottom: 1px solid black;
	}

	.left-space {
		margin-left: 1em;
	}

	.right-close {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 1.2em;
		cursor: pointer;
	}

	.red-font {
		color: red;
	}

	.preview-txt {
		margin-top: 40%;
	}

	table tr td {
		border: 0px;
		text-align: left;
		padding: 5px;
	}

	table {
		margin: auto;
	}

	.opton-input {
		width: 10em;
		height: 2em;
	}

	.export-title {
		font-size: 1.2em;
		font-weight: bold;
	}
</style>